<template>
  <div>
    <Form :rules="ruleValidate" ref="form" :label-width="100">
      <Row :gutter="32" class="code-row-bg">
        <Col span="24">
          <Form-item :label="'字段类型'" prop="fieldType">
            <Select size="default" transfer placeholder="请选择字段类型" v-model="formDesc.type">
              <Option v-for="item in FIELD" :label="item.label" :value="item.value" :key="item.value">{{
                item.label
              }}</Option>
            </Select>
          </Form-item>
        </Col>
      </Row>
      <Row :gutter="32" prop="fieldType" class="code-row-bg">
        <Col span="16">
          <Form-item label="最大长度" :label-width="150" v-if="formDesc.type === INPUT_TYPE['TEXT']">
            <InputNumber
              style="width: 100%;"
              v-model="formDesc.maxlength"
              placeholder="请输入"
              :max="50"
              :min="0"
              :step="1"
              :precision="0"
              :active-change="false"
            ></InputNumber>
          </Form-item>
          <Form-item label="最大长度" :label-width="150" v-if="formDesc.type === INPUT_TYPE['TEXTAREA']">
            <InputNumber
              style="width: 100%;"
              v-model="formDesc.maxlength"
              placeholder="请输入"
              :max="30000"
              :min="51"
              :step="1"
              :precision="0"
              :active-change="false"
            ></InputNumber>
          </Form-item>
          <Form-item label="格式" :label-width="150" v-if="formDesc.type === INPUT_TYPE['NUMBER']">
            <Select style="width: 100%" transfer placeholder="请选择" v-model="formDesc.numberType">
              <Option v-for="item in formatList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </Form-item>
          <Form-item
            v-if="
              formDesc.type === INPUT_TYPE['RADIO'] ||
                formDesc.type === INPUT_TYPE['CHECKBOX'] ||
                formDesc.type === INPUT_TYPE['SELECT']
            "
            label=""
            :label-width="150"
          >
            <radioItem
              ref="radioItem"
              :fieldType="formDesc.type"
              :optionsList="formDesc.options"
              :selection="formDesc.selectedOption"
            ></radioItem>
          </Form-item>
          <Form-item label="选择数据" :label-width="150" v-if="formDesc.type === INPUT_TYPE['SIN_REFERENCE']">
            <Input v-model="formDesc.referenceData" placeholder="点击选择数据"></Input>
          </Form-item>
        </Col>
      </Row>
      <Row :gutter="32" class="code-row-bg">
        <Col span="24">
          <Form-item :label="'是否必填'" prop="control">
            <RadioGroup v-model="formDesc.control">
              <Radio :label="1">必填</Radio>
              <Radio :label="0">非必填</Radio>
            </RadioGroup>
          </Form-item>
        </Col>
      </Row>
    </Form>
  </div>
</template>

<script>
import radioItem from '../../components/Radio.vue'
import { FIELD, INPUT_TYPE } from '../../const/applyForm/tableCreator'
export default {
  components: { radioItem },
  data() {
    return {
      FIELD: FIELD,
      INPUT_TYPE: INPUT_TYPE,
      ruleValidate: {},
      formatList: [
        { label: '整数', value: 0 },
        { label: '保留1位小数', value: 1 },
        { label: '保留2位小数', value: 2 },
        { label: '百分比', value: 3 }
      ],
      formDesc: {
        type: 1,
        numberType: 1,
        maxlength: 50,
        options: [],
        selectedOption: 0, // 下拉框字段的单选多选
        control: 1
      }
    }
  },
  props: {
    prop: String,
    attributes: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    setPageActions() {
      this.$emit('SetPageActions', [
        {
          text: '确定',
          theme: 'primary',
          handle: () => {
            if (
              this.formDesc.type === INPUT_TYPE['RADIO'] ||
              this.formDesc.type === INPUT_TYPE['CHECKBOX'] ||
              this.formDesc.type === INPUT_TYPE['SELECT']
            ) {
              this.formDesc.options = this.$refs.radioItem.options
            }
            if (this.formDesc.type === INPUT_TYPE['SELECT']) {
              this.formDesc.selectedOption = this.$refs.radioItem.selectedOption
            }
            const obj = { ...this.formDesc, prop: this.prop }
            this.$emit('Close', obj)
          }
        },
        {
          text: '取消',
          handle: () => {
            this.$emit('Close')
          }
        }
      ])
    }
  },
  watch: {
    "formDesc.type": {
      handler(newVal) {
        if (newVal === INPUT_TYPE['TEXT'] && this.formDesc.maxlength > 50) {
          this.formDesc.maxlength = 50
        } else if (newVal === INPUT_TYPE['TEXTAREA'] && this.formDesc.maxlength < 51) {
          this.formDesc.maxlength = 51
        }
      }
    }
  },
  created() {
    this.$emit('SetTitle', '指标值设置')
    this.$emit('SetPageMinHeight', 200)
    this.setPageActions()
    if (this.attributes && Object.keys(this.attributes).length) {
      this.formDesc = this.attributes
    }
  }
}
</script>

<style lang="less" scoped></style>
